<template>
	<view class="coin-detail">
		<order-header-search @headerHeight="handleHeightCalculated" ref="orderHeaderSearch"></order-header-search>
		<order-list ref="orderList" :headerHeight="headerHeight" :tabsHeight="tabsHeight"
			v-show="tabsMenuCurrent == 0 || tabsMenuCurrent == 2 || tabsMenuCurrent == 3"></order-list>
		<activity-order-list ref="activityOrderList" :headerHeight="headerHeight" :tabsHeight="tabsHeight"
			v-show="tabsMenuCurrent == 1"></activity-order-list>
		<view id="tabbar">
			<u-tabbar :value="tabsMenuCurrent" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
				:border="false" activeColor="#6072FF" inactiveColor="#0000007F">
				<u-tabbar-item :name="item.index" :text="item.title" v-for="(item,index) in tabBarList" :key="index"
					@click="tabsMenuClick(item.index)">
					<image class="u-page__item__slot-icon" slot="active-icon" :src="staticFileUrl + item.activeIconUrl">
					</image>
					<image class="u-page__item__slot-icon" slot="inactive-icon"
						:src="staticFileUrl + item.inactiveIconUrl"></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import activityOrderList from '@/pages-other/order/activity-order-list/activity-order-list.vue'
	import orderList from '@/pages-other/order/order-list/order-list.vue'
	import orderHeaderSearch from '@/pages-other/order/order-header-search.vue'
	export default {
		components: {
			activityOrderList,
			orderList,
			orderHeaderSearch
		},
		data() {
			return {
				tabsHeight: 0,
				headerHeight: 0,
				// 顶部tabs菜单
				staticFileUrl: this.$configPath.staticFileUrl,
				tabBarList: [{
						index: 0,
						title: '普通订单',
						activeIconUrl: '/image/order/ordinary-order-select.png',
						inactiveIconUrl: '/image/order/ordinary-order.png',
					},
					// {
					// 	index: 1,
					// 	title: '活动订单',
					// 	activeIconUrl: '/image/order/activity-order-select.png',
					// 	inactiveIconUrl: '/image/order/activity-order.png',
					// },
					{
						index: 2,
						title: '抖音核销',
						activeIconUrl: '/image/order/douyin-order-select.png',
						inactiveIconUrl: '/image/order/douyin-order.png',
					},
					{
						index: 3,
						title: '美团核销',
						activeIconUrl: '/image/order/meituan-order-select.png',
						inactiveIconUrl: '/image/order/meituan-order.png',
					},
				],
				// 顶部tabs菜单索引
				tabsMenuCurrent: 0,
				options: {},
				activityData: null,
				// 第一个tabs是否初始化了
				isTabsMenuCurrentInit0: false,
				// 第二个tabs是否初始化了
				isTabsMenuCurrentInit1: false,
			};
		},
		onReady() {
			this.getPomHeight();
			this.$nextTick(() => {
				// this.$refs.orderList.Ready();
				this.$refs.orderHeaderSearch.Ready();
			})
		},
		//监听页面加载,登录后会调起
		onLoad(options) {
			if (options) {
        // console.log(options,'参数')
				this.options = options;
        if(options.typeId){
          this.options.typeId = options.typeId
        }
        if(options.outTradeNo){
          this.options.keyword = options.outTradeNo
          options.tabsMenuCurrent = 0
        }
        // console.log(this.options,'订单来的数据')
        //从别的页面过来 options.typeId分支
        if(options.typeId && this.$operateTypeEnum.ACTIVITY_INCOME == this.options.typeId){
          this.tabsMenuCurrent = 1
          this.isTabsMenuCurrentInit0 = true //活动订单进入，不初始化普通订单数据
          options.tabsMenuCurrent = this.tabsMenuCurrent
          this.$refs.orderHeaderSearch.loadData(options);
          this.$refs.activityOrderList.Load(options);
        }else if (options.typeId && this.$operateTypeEnum.DOUYIN == this.options.typeId){
          this.tabsMenuCurrent = 2
          options.tabsMenuCurrent = this.tabsMenuCurrent
        }else if (options.typeId && this.$operateTypeEnum.MEITUAN == this.options.typeId){
          this.tabsMenuCurrent = 3
          options.tabsMenuCurrent = this.tabsMenuCurrent
        }else if (options.typeId && this.$operateTypeEnum.CASH_INCOME == this.options.typeId ||
            options.typeId && this.$operateTypeEnum.ONLINE_INCOME == this.options.typeId){
          this.tabsMenuCurrent = 0
          options.tabsMenuCurrent = this.tabsMenuCurrent
        }
        if(options.typeId){
          options.tabsMenuCurrent = this.tabsMenuCurrent
        }

        //会员管理进入
        if(options.memberId){
          this.options.keyword = options.memberId
          this.options.comprehensiveConditionId = 2
          options.tabsMenuCurrent = 0
        }
			}
			//初始化普通订单数据
			if (!this.isTabsMenuCurrentInit0) {
				this.$nextTick(() => {
					this.isTabsMenuCurrentInit0 = true;
					this.$refs.orderHeaderSearch.loadData(options);
					this.$refs.orderList.Load(options);
					// console.log('1111',this.options)
				})
			}
			//筛选了条件
			uni.$off("params");
			uni.$on("params", (data) => {
				// console.log('查询进入了吗',data.params);
				this.options = data.params
				if (data.params.tabsMenuCurrent == 1) {
					this.activityData = {
						comprehensiveConditionId: data.params.comprehensiveConditionId,
						endTime: data.params.endTime,
						startTime: data.params.startTime,
						activityTypeId: data.params.activityTypeId,
						keyword: data.params.keyword,
						status: data.params.status,
					}
					this.$refs.activityOrderList.Load({
						data: this.activityData
					});
				} else {
					this.$refs.orderList.Load({
						data: data.params
					});
				}
			})
		},
		onPullDownRefresh() {
			this.$nextTick(() => {
				if (this.tabsMenuCurrent == 0) {
					this.$refs.orderList.PullDownRefresh();
				} else if (this.tabsMenuCurrent == 1) {
					this.$refs.activityOrderList.PullDownRefresh();
				}
			})
		},
		methods: {
			handleHeightCalculated(height) {
				this.headerHeight = height; // 接收子组件计算的高度
				// console.log( this.headerHeight,'子组件计算的头部高度')
			},
			// 切换普通订单和活动订单
			tabsMenuClick(index) {
				this.tabsMenuCurrent = index;
				this.$refs.orderHeaderSearch.tabsMenuCurrentIndex(this.tabsMenuCurrent,this.options.comprehensiveConditionId);
				this.$nextTick(() => {
					if (this.tabsMenuCurrent == 0 || this.tabsMenuCurrent == 2 || this.tabsMenuCurrent == 3) {
						this.$refs.orderList.tabsMenuCurrentIndexAndParams(this.tabsMenuCurrent, {
							data: this.options
						});
					} else if (this.tabsMenuCurrent == 1) {
						if (this.options && Object.keys(this.options).length > 0) {
							// this.options 不是空对象
							this.activityData = {
								comprehensiveConditionId: this.options.comprehensiveConditionId,
								endTime: this.options.endTime,
								startTime: this.options.startTime,
								activityTypeId: this.options.activityTypeId,
								keyword: this.options.keyword,
								status: this.options.status,
							}
              this.$refs.activityOrderList.Load({
                activityData: this.activityData
              });
						}else{
              this.$refs.activityOrderList.switchActivity({data:null});
            }
            // console.log(this.activityData,'切换参数')
					}
				})
			},
			//计算滚动条高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#tabbar').boundingClientRect()
				query.exec(res => {
					this.tabsHeight = res[0].height;
				});
				console.log('底部高度', this.tabsHeight);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #F7F8F7;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.coin-detail {
		font-family: "Microsoft YaHei";

		.header {

			.header-search {
				background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(236, 245, 255, 255) 100%);
				padding: 0 24rpx;
				padding-top: 24rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				position: relative;
				z-index: 999;

				.search-keyword {
					width: 510rpx;
				}

				.search-more {
					display: flex;
					flex-direction: row;
					align-items: center;
					// padding: 10rpx 20rpx;

					.search-more-title {
						color: rgba(13, 13, 13, 0.9);
						font-size: $f-base;
						line-height: 40rpx;
						margin-right: 27rpx;
					}

					.down-icon {
						height: 10rpx;
						width: 17rpx;
					}
				}
			}

			.tool-btn {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: 100%;
				border-top: 1px solid #fafafa;
				height: 100rpx;
				background: $uni-bg-color;
			}

			.screening-box {
				//padding: 26rpx 27rpx 30rpx 79rpx;
			}

			.search-more-panel {
				position: absolute;
				background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 1) 100%);
				z-index: 999;
				width: 100vw;

				.u-form-item__body__left__content__label {
					color: rgba(13, 13, 13, 0.7);
					font-size: $f-base;
					line-height: 40rpx;
				}
			}


		}

		.information-title {
			color: rgba(0, 0, 0, 0.6);
			font-size: 28rpx;
		}

		.coin-order-list {
			margin: 0 24rpx;
			margin-top: 40rpx;

			// padding-bottom: 30rpx;
			.header-statistical {
				margin: 26rpx 0;
				padding: 28rpx;
				background: #6072FF;
				border-radius: 20rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.sub-title {
					color: rgba(255, 255, 255, 0.9);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: center;
				}

				.turnover {
					color: rgb(255, 255, 255);
					font-family: "OPPOSans";
					font-size: 32rpx;
					line-height: 34rpx;
					margin-top: 7rpx;
					text-align: center;
				}

				.exception-number {
					border: 1rpx solid rgba(255, 255, 255, 0.7);
					border-radius: 60rpx;
					color: rgba(255, 255, 255, 0.9);
					font-size: 22rpx;
					line-height: 34rpx;
					margin-top: 32rpx;
					padding: 0 20rpx;
					text-align: center;
				}

				.exception-number-not {
					height: 70rpx;
				}
			}

			.coin-order-item {
				background: $uni-bg-color;
				border-radius: 20rpx;
				padding: 30rpx;
				line-height: 34rpx;
				margin-bottom: 20rpx;

				.user-information-box {
					padding: 24rpx 16rpx;
					margin-top: 24rpx;
					width: 615rpx;
					height: 149rpx;
					background: rgba(63, 120, 254, 0.1);
					border-radius: 12rpx;



					.distribution-text {
						color: rgb(96, 114, 255);
						font-size: 18rpx;
					}

					.margin-bottom {
						margin-bottom: 15rpx;
					}

					.user {
						margin-left: 7rpx;
						width: 100%;

						.male {
							font-size: 26rpx;
							color: #6072FF;
							margin-left: 13rpx;
						}

						.keep-secret {
							margin-left: 9rpx;
							color: rgb(170, 0, 0);
							font-size: 24rpx;
						}

						.female {
							font-size: 26rpx;
							color: #FF4D94;
							margin-left: 13rpx;
						}
					}

					.user-right-box {
						justify-content: space-between;
						align-items: baseline;
						display: flex;

						.distribution-container {
							width: 50%;
							justify-content: space-between;
							display: flex;

							.details-box {
								display: flex;
								align-items: center;
							}

							.distribution {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5rpx 15rpx;
								box-sizing: border-box;
								border: 1rpx solid rgb(96, 114, 255);
								border-radius: 30rpx;

							}
						}
					}

					.user-box {
						display: flex;
						align-items: center;
					}

				}

				.left-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.details {
					display: flex;
					align-content: center;
					justify-content: center;
					margin-top: 25rpx;
				}

				.order-time-box {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.price {
						margin-left: 12rpx;
					}
				}

				.start-button-text {
					color: rgb(255, 255, 255);
				}

				.color-6072FF {
					background: #6072FF !important;
				}

				.payment-successful {
					margin-right: 14rpx;
					padding: 3rpx 9rpx;
					color: #FFFFFF;
					height: 30rpx;
					background: rgb(0, 187, 156);
					border-radius: 22rpx;
				}

				.coin-success {
					padding: 3rpx 9rpx;
					color: #00BB9C;
					height: 30rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(0, 187, 156);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.coin-color-orange {
					color: #FF7905 !important;
					border: 1rpx solid rgb(255, 121, 5) !important;
				}

				.coin-failure {
					padding: 3rpx 9rpx;
					color: #FF0000;
					height: 40rpx;
					box-sizing: border-box;
					border: 1rpx solid rgb(255, 0, 0);
					border-radius: 22rpx;
					margin-right: 20rpx;
				}

				.hide {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.information-text {
					color: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					margin-left: 11rpx;
					flex: 1;

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.item-name {
							// 强制换行
							word-wrap: break-word;
							// 强制英文单词换行
							word-break: break-word;
							width: 240rpx;
						}

						.item-count {
							margin-right: 20rpx;
						}
					}

					.item:last-child {
						margin-bottom: 0;
					}
				}

				.information-bar {

					margin-top: 20rpx;
					display: flex;
					align-items: center;
				}

				.information-bar-item {
					align-items: flex-start;
				}

				.order-info {
					color: rgba(0, 0, 0, 0.92);
					font-size: $f-base;
				}

				.coin-number-info {
					color: rgba(0, 0, 0, 0.7);
					font-size: 24rpx;
					margin-top: 39rpx;
					display: flex;
					justify-content: space-between;

					.coin-number {
						color: rgb(0, 0, 0);
						font-family: "OPPOSans";
						font-size: $f-lg;
						margin-right: 12rpx;
					}

					.member-id {
						color: rgb(0, 0, 0);
					}
				}

				.other-info2 {
					display: flex;
					flex-direction: row-reverse;
					// justify-content: space-between;
					margin-top: 27rpx;
					font-size: $f-base;
					color: rgba(0, 0, 0, 0.7);

				}

				.other-info {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 27rpx;

					.order-state {
						font-size: $f-base;
					}

					.order-time {
						color: rgba(0, 0, 0, 0.5);
						font-size: $f-base;
					}

				}
			}
		}

	}
</style>
